<template>
  <view v-if="imageSrc" class="container">
    <view class="cropper">
      <BtCropper
        ref="croper"
        :ratio="ratio"
        :dWidth="0"
        :rotate="0"
        fileType="png"
        showGrid
        @change="onChange"
        :imageSrc="imageSrc"
      >
      </BtCropper>
    </view>
    <view class="footer">
      <view class="btnGroup">
        <view class="cancel_btn" @click="returnPage">取消</view>
        <view class="finish_btn" @click="onCrop">完成</view>
      </view>
    </view>
  </view>
</template>

<script>
import useUploadFile from "/utils/hooks/useUploadFile.js";
import BtCropper from "/components/BtCropper/index";
import upImgOssHook from "/components/common/upImgOssHook.js";

const { uploadImage } = useUploadFile();

export default {
  name: "full-screen",
  components: {
    BtCropper,
  },
  data() {
    return {
      imageSrc: "",
    };
  },
  props: {
    // bgImg、avatar
    fullType: {
      type: String,
      required: true,
    },
  },
  computed: {
    ratio() {
      if (this.fullType == "avatar") return 1;
      else if (this.fullType == "bgImg") return 10 / 7;
      return "";
    },
  },
  mounted() {},
  methods: {
    chooseImg() {
      uploadImage(1).then((res) => {
        this.imageSrc = res.tempFilePaths[0];
      });
    },
    onChange(ev) {
      console.log(ev);
    },
    onCrop(cb) {
      this.$refs.croper.crop().then((path) => {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        console.log("path", path);
        upImgOssHook([{ tempFilePath: path }])
          .then((res) => {
            this.$emit("confirm", res[0].fileKey);
            setTimeout(() => {
              this.returnPage();
            }, 500);
          })
          .catch((err) => {
            console.error(err);
            uni.showToast({
              icon: "none",
              title: `上传图片错误：${err}`,
            });
          })
          .finally(() => {
            uni.hideLoading();
          });
      });
    },
    returnPage() {
      this.imageSrc = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 99991;
  .cropper {
    flex: 1;
  }
}

uni-page-body {
  height: 100%;
}

.footer {
  .scroller {
    // align-items: center;
    width: 100vw;
    height: 100rpx;
    touch-action: none;

    .scrollerContainer {
      display: flex;
      flex-wrap: nowrap;
      height: 100rpx;
      align-items: center;
    }

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 40rpx;
      width: 70rpx;
      height: 70rpx;
      flex-shrink: 0;
      color: #ffffff;

      &.active {
        color: #0070f3;

        .itemContent {
          border: 1px solid #0070f3;
        }
      }

      .itemContent {
        border-radius: 10rpx;
        padding: 10rpx;
        border: 1px solid #ffffff;
        font-size: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
      }

      .ratio-1-1 {
        width: 70%;
        height: 70%;
      }

      .ratio-16-9 {
        width: 100%;
        height: 56.25%;
      }

      .ratio-9-16 {
        width: 56.25%;
        height: 100%;
      }

      .ratio-4-3 {
        width: 100%;
        height: 75%;
      }

      .ratio-3-4 {
        width: 75%;
        height: 100%;
      }

      .ratio-3-2 {
        width: 100%;
        height: 66.6%;
      }

      .ratio-2-3 {
        width: 66.6%;
        height: 100%;
      }
    }
  }

  .btnGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #000000;
    height: calc(100rpx + env(safe-area-inset-bottom));
    width: 100%;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    font-family: PingFangSC-Regular, PingFang SC;

    .cancel_btn {
      font-size: 28rpx;
      color: #fff;
    }
    .finish_btn {
      padding: 10rpx 40rpx;
      font-size: 28rpx;
      color: #000000;
      background: #ffe60d;
      border-radius: 50rpx;
      box-sizing: border-box;
    }

    .btn {
      width: 300rpx;
      background-color: #007aff;
      color: #ffffff;
      border-radius: 99px;
      text-align: center;
      color: #ffffff;
      line-height: 70rpx;

      &.choose {
        margin-right: 20rpx;
        background-color: #f0ad4e;
      }
    }
  }
}
</style>
